<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .num{
            width: 50px;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="7">
            <tr>
                <th><input type="checkbox" v-model="checkAll" @click="checks">全选</th>
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
            </tr>
            <tr v-for="(item, index) in list">
                <td><input type="checkbox" v-model="item.isCheck" @click="check"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><input type="number" class="num" v-model="item.num" @click="numChange"></td>
            </tr>
            <tr>
                <td class="all" colspan="5">总计:{{total}}</td>
            </tr>
        </table>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script src="../lib/jQuery/jquery.min.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                list:[
                    {
                        id:100,
                        name:'realme 真我X50 Pro 5G 6400万变焦四摄',
                        price:3699.00,
                        num:1,
                        isCheck:false
                    },
                    {
                        id:102,
                        name:'OPPO Find X2 超感官',
                        price:5499.00,
                        num:1,
                        isCheck:false
                    },
                    {
                        id:104,
                        name:'三星Galaxy Note10+ 5G',
                        price:6499.00,
                        num:1,
                        isCheck:false
                    },
                    {
                        id:109,
                        name:'Apple iPhone 8 Plus ',
                        price:4399.00,
                        num:1,
                        isCheck:false
                    },
                ],			
                checkAll: '',
            },
            methods: {
                check(e) {
                    var index = $(e.target).parent().parent().index()-1;
                    this.list[index].isCheck = !this.list[index].isCheck;

                    var i = this.list.every(function (el) {
                        return el.isCheck == true
                    })
                    this.checkAll = i ? true : false;
                    console.log(this.list[index].isCheck);
                },
                numChange(e) {
                    var index = $(e.target).parent().parent().index()-1;
                    if ($(e.target).val()  == -1) {
                        this.list[index].num = 0
                        alert('数量不能为负')
                        return
                    }
                    this.list[index].num = $(e.target).val();
                },
                checks() {
                    for (let i = 0; i < this.list.length; i++) {
                        this.list[i].isCheck = !this.checkAll
                    }
                }
            },
            computed: {
                total() {
                    var total = 0;
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].isCheck) {
                            total += this.list[i].price * this.list[i].num
                        }
                    }
                    return total
                }
            },
        })
    </script>
</body>
</html>